<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结算</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/all.css" />
		<link rel="stylesheet" type="text/css" href="../../css/evaluation.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="html5plus://ready"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="../../js/fanhui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/zf.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.margin-top {
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app-js">
			<header>
				<van-nav-bar @click-left="onClickLeft" style="background-color:red;">
					<van-icon slot="left" name="arrow-left" color="white"></van-icon>
					<label slot="title" style="color: white;">结算</label>
				</van-nav-bar>
			</header>
			<section>
				<van-badge-group class="margin-top">
					<van-badge title="商品清单"></van-badge>
				</van-badge-group>

				<ul>
					<li v-for="(item, index) in list" :name="item.id" style="font-family: '宋体';">
						<van-row>
							<van-col span="24">
								<van-card :num="item.goodsCount" :price="item.RealPrice" :title="item.Name" :thumb="item.CoverImage" />
							</van-col>
						</van-row>
					</li>
				</ul>

				<van-badge-group class="margin-top">
					<van-badge title="收货地址"></van-badge>
				</van-badge-group>

				<van-cell-group>
					<van-field v-model="username" clearable label="联系人" placeholder="请输入联系人"></van-field>
					<van-field v-model="phone" clearable label="手机号码" placeholder="请输入手机号"></van-field>
					<van-field v-model="address" clearable label="详细地址" placeholder="请输入详细地址"></van-field>
				</van-cell-group>

				<van-badge-group class="margin-top">
					<van-badge title="支付方式"></van-badge>
				</van-badge-group>

				<van-radio-group v-model="radio">
					<van-cell-group>
						<van-cell title="支付宝" clickable @click="radio = '1'">
							<van-radio name="1" />
						</van-cell>
						<van-cell title="微信" clickable @click="radio = '2'">
							<van-radio name="2" />
						</van-cell>
					</van-cell-group>
				</van-radio-group>
			</section>
			<footer style="background-color: white">
				<van-submit-bar :price="sum" button-text="提交订单" @submit="onSubmit"></van-submit-bar>
			</footer>
		</div>
	</body>
	<script>
		var newUser = localStorage.getItem("user"); //从localStorage里取数据(字符串格式)
		newUser = JSON.parse(newUser); //把字符串格式转换成Json格式
		console.log(newUser); //用户信息
		var vm = new Vue({
			el: "#app-js",
			data: {
				list: [], //商品数组
				username: "", //用户名
				phone: "", //用户手机号
				address: "", //默认地址
				radio: "1", //单选框
				sum: 1 //合计总价
			},
			created: function() {
				var _this = this;
				var w = plus.webview.currentWebview();
				if (w.pay == "xiangqing") { //详情页面传过来的支付请求
					ajax({ //请求产品数据
						url: "http://dsapi.ysd3g.com/API/GoodsDetail",
						dataType: "jsonp",
						data: {
							gId: w.ID
						},
						success: function(res) {
							var pay = {
								RealPrice: res.Detail.RealPrice,
								CoverImage: res.Detail.CoverImage,
								goodsCount: 1,
								Name: res.Detail.Name
							}
							_this.list.push(pay);
							console.log(res);
							_this.sum = res.Detail.RealPrice*100; //因为只有一件商品所以直接输入价格
						},
					})
				} else { //购物车传过来的
					var _this = this;
					var shopdata = plus.webview.currentWebview().shopdata; //购物车传过来的商品数组


					var money = plus.webview.currentWebview().money; //购物车传过来的总价
					_this.list = shopdata;
					_this.sum = money;
				}
				_this.username = newUser.UserData.NickName;
				_this.phone = newUser.UserData.Phone;
				_this.address = newUser.UserData.CityName + newUser.UserData.DistrictName + newUser.UserData.ProvinceName;
			},
			methods: {
				onClickLeft: function() { //返回
					plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
				},
				onSubmit: function() { //提交订单
					var _this = this;
					console.log(newUser.Key);
					var shoppingCartJsonStr = _this.getpaydata();
					console.log(shoppingCartJsonStr)
					console.log(_this.getpaydata())
					ajax({ //生成订单
						url: "http://dsapi.ysd3g.com/API/GeneratingOrder",
						dataType: "jsonp",
						data: {
							key: newUser.Key,
							shoppingCartJsonStr: JSON.stringify(shoppingCartJsonStr)

						},
						success: function(res) {
							if (res.Error) {
								vm.$toast.alert("出现错误，请稍后再试！")
							} else {
								localStorage.setItem("orderId", res.OrderId);
								_this.pay();
							}
							console.log(res);
							console.log(res.OrderId);
							console.log(localStorage.getItem("orderId"));
							console.log("生成订单");
						}
					})
				},
				pay: function() { //支付
					var _this = this;
					ajax({ //支付
						url: "http://dsapi.ysd3g.com/api/OrderPay",
						dataType: "jsonp",
						data: {
							key: newUser.Key, //登陆返回的Key
							oId: localStorage.getItem('orderId'), //订单Id
							payType: '1', //可以写死支付宝
							addressIdx: "", //可为空,收货地址
							moey: "0.01" //总价,随意写
						},
						success: function(res) {
							if (res.Error) {
								alert(res.Msg)
							} else {
								//在这把已经支付的商品从购物车清除
								var shopcar = JSON.parse(localStorage.getItem("shopcar")); //购物车数组
								var cardata = _this.getpaydata(); //购物车传过来的要结算商品数组

								//循环删除
								for (var i = 0; i < cardata.length; i++) {
									for (var j = 0; j < shopcar.length; j++) {
										console.log(shopcar[j]);
										console.log(cardata[i]);
										console.log(shopcar[j].goodsId == cardata[i].goodsId)
										if (shopcar[j].goodsId == cardata[i].goodsId) {
											shopcar.splice(j, 1);
											j--;
										}
									}
								}
								console.log(shopcar);
								localStorage.removeItem("shopcar"); //清除缓存
								localStorage.setItem("shopcar", JSON.stringify(shopcar));
								var shop = plus.webview.getWebviewById("shop");
								shop.reload();
								var payment = "";
								plus.payment.getChannels(function(s) {
									console.log(s);
									plus.payment.request(s[0], res.strJson, function() {
										vm.$toast.alert("支付操作成功！");
										localStorage.removeItem(orderId);
									}, function(e) {
										console.log(e);
										_this.$toast.fail(e.message);
									})
								}, function(e) {
									console.log(123)
									_this.$toast.fail(e.message);
								})
							}
							console.log(res);
						}
					});
				},
				getpaydata: function() {
					var w = plus.webview.currentWebview();
					var shopdata = plus.webview.currentWebview().shopdata;
					var shoppingCartJsonStr = [];
					if (w.pay == "xiangqing") {
						shoppingCartJsonStr = [{
							goodsId: plus.webview.currentWebview().ID,
							goodsCount: 1
						}];
					} else{
						for (var i = 0; i < shopdata.length; i++) {
							var obj = {
								goodsId: "",
								goodsCount: ""
							}
							obj.goodsId = shopdata[i].Id;
							obj.goodsCount = shopdata[i].goodsCount;
							shoppingCartJsonStr.push(obj);
						}
					}
					return shoppingCartJsonStr;
				},

			}
		})
	</script>
</html>